<template>
  <svg
    class="cursor-pointer flex-shrink-0"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="M13.0607 12L18.1872 17.1265L17.1265 18.1872L12 13.0606L6.87348 18.1872L5.81282 17.1265L10.9393 12L5.81282 6.87346L6.87348 5.8128L12 10.9393L17.1265 5.8128L18.1872 6.87346L13.0607 12Z"
      fill="currentColor" />
  </svg>
</template>

<script setup lang="ts">
  interface Props {
    size?: number | string;
    color?: string;
  }

  const props = withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#CBCBCB',
  });
</script>

<style scoped lang="scss">
  svg {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
    outline: none;
    color: v-bind('props.color');
    cursor: pointer;
    &:hover {
      color: #7a7a7a;
    }
  }
</style>
